<template>
  <div id="video-list">
    <img style="width: 5rem; padding-top: 3rem; display: inherit;" src="../assets/images/blank.png" alt="" v-if="fun.isTextEmpty(list)" />
    <div class="video-list" style="margin: 10px;">
      <vue-masonry-wall ref="masonryWall" class="masonry-wall-theme" :items="list" :options="{ width: 172, padding: 5}">
        <template v-slot:default="{ item }">
          <li @click="toVideo(item)" :key="i" >
            <img class="video-img" v-lazy="item.cover" alt="" />
            <p>{{ item.title }}</p>
            <div class="peole_box" >
              <img :src="item.member&& item.member.avatar" alt="" />
              <span v-if="item.member">{{ item.member.nickname }}</span>
              <div class="right" v-if="is_show_visit_num"><i class="iconfont icon-card_eye"></i>{{ item.visit_num + item.virtual_visit_num }}</div>
            </div>
            <img class="play" src="../assets/images/home_play@2x.png" alt="" />
          </li>
        </template>
      </vue-masonry-wall>
      <!-- <div class="load" v-if="!showLoading">
        <img src="../assets/images/video-loading.gif" alt="loading" />
      </div> -->

      <div v-if="isDiy && !moreTextHidden">
        <div style="width: 100%; height: 40px; line-height: 40px; text-align: center;" v-if="isLoadMore" @click="getMoreData">{{ $i18n.t("加载更多") }}</div>
      </div>

      <div style="height: 3rem;" v-if="!isDiy"></div>
    </div>
  </div>
</template>

<script>
import VueMasonryWall from "vue-masonry-wall";
export default {
  props: {
    //弹窗是否显示，默认不显示
    // showLoading: {
    //   type: Boolean,
    //   default: false
    // },
    list: {
      type: Array,
      default: () => []
    },
    card_id: {
      type: [String, Number],
      default: 0
    },
    isDiy: {
      type: Boolean,
      default: false
    },
    isLoadMore: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: 0
    },
    moreTextHidden: {
      type: Boolean,
      default: false
    },
    isBottom: {
      type: null
    },
    lastIndex: {
      type: null
    },
    isLast: {
      type: null
    },
    index: {
      type: null
    },
    tabcontrol: {
      type: Boolean,
      default: false
    }
  },
  components: { VueMasonryWall },
  data() {
    return {
      newArray1: [],
      newArray2: [],
      is_show_visit_num: false,
    };
  },
  watch: {
    list: function(newVal, oldVal) {
      let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")) || {};
      this.is_show_visit_num = basic_info.plugin_setting?.video_share?.is_show_visit_num == 1 ? true : false;
    },
    isBottom: function(newVal, oldVal) {
      // console.log(this.isLast, "dw111111111111111111", this.lastIndex, this.index);
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.$emit("getMore", true);
        }
      } else {
        // this.lastIndex == this.index判断商品列表是最后一个组件
        // console.log(newVal && this.lastIndex == this.index && this.isLoadMore, "dddddddddddd");
        if (newVal && this.lastIndex == this.index && this.isLoadMore) {
          this.$emit("getMore", true);
        }
      }
    }
  },
  activated() {
    this.refreshLayout();
  },
  mounted() {
    // if (this.isDiy) {
    // this.sort(0, this.list);
    // }
    let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")) || {};
    this.is_show_visit_num = basic_info.plugin_setting?.video_share?.is_show_visit_num == 1 ? true : false;
  },
  methods: {
    refreshLayout() {
      this.$nextTick(() => {
        if (this.$refs.masonryWall) {
          this.$refs.masonryWall.$resize();
        }
      });
    },
    getMoreData() {
      this.$emit("getMore", true);
    },
    toVideo(item) {
      let page = this.list.findIndex((value, index, arr) => {
        return value.id === item.id;
      });
      //页数
      page = Math.ceil((page + 1) / 12);
      if (this.isDiy) {
        this.$router.push(this.fun.getUrl("VideoDetail", {}, { vid: item.id }));
      } else {
        this.$router.push(this.fun.getUrl("VideoDetail", {}, { vid: item.id, page: page, from: "card", card_id: this.card_id }));
      }
    },
    // sort(arg, list) {
    //   let that = this;
    //   let index = arg || 0;
    //   if (list.length > index) {
    //     that.getImg(
    //       list[index].cover,
    //       function(w, h, r) {
    //         let boxA = 0;
    //         let boxB = 0;

    //         if (document.getElementsByClassName(`zq-waterfall-left-video${that.id}`)[0]) {
    //           boxA = document.getElementsByClassName(`zq-waterfall-left-video${that.id}`)[0].clientHeight;
    //         }

    //         if (document.getElementsByClassName(`zq-waterfall-right-video${that.id}`)[0]) {
    //           boxB = document.getElementsByClassName(`zq-waterfall-right-video${that.id}`)[0].clientHeight;
    //         }

    //         if (boxA <= boxB) {
    //           that.newArray1.push(list[index]);
    //           that.$nextTick(() => {
    //             that.sort(index + 1, list); //加载完再递归
    //           });
    //         } else {
    //           that.newArray2.push(list[index]);
    //           that.$nextTick(() => {
    //             that.sort(index + 1, list);
    //           });
    //         }
    //       },
    //       function() {
    //         list[index].cover = "https://www.yunzmall.com/addons/yun_shop/static/app/img/agreen_video@2x.png";
    //         that.$nextTick(() => {
    //           that.sort(index + 1, list);
    //         });
    //       }
    //     );
    //   }
    //   if (list.length - 1 == index) {
    //     this.$emit("loadMore", true);
    //   }
    // },
    // 图片加载完回调
    // getImg(url, callback, callback2) {
    //   let img = new Image();
    //   img.src = url;
    //   //如果图片被缓存，则直接返回缓存数据
    //   if (img.complete) {
    //     /* callback(img.width, img.height); */
    //     callback(img.width, img.height, Number(img.height) / Number(img.width));
    //   } else {
    //     //完全加载完毕的事件
    //     img.onload = function() {
    //       /* callback(img.width, img.height); */
    //       callback(img.width, img.height, Number(img.height) / Number(img.width));
    //     };

    //     img.onerror = function() {
    //       callback2();
    //     };
    //   }
    // }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.masonry-wall-theme ::v-deep .masonry-column, .masonry-wall-theme ::v-deep .masonry-item{
  overflow: hidden;
}
#video-list {
  width: 100%;

  .load {
    text-align: center;

    img {
      width: 3rem;
    }
  }
}

.video-list {
  text-align: left;

  /* display: flex; */
  ul {
    vertical-align: top;
    display: inline-block;

    /* display: flex; */

    /* flex-direction: column; */

    /* flex-wrap: wrap; */
    width: 48%;
  }

  li {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
  }

  .play {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  ul:first-child {
    margin-right: 0.7rem;
  }

  p {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    padding-bottom: 0;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .video-img {
    width: 100%;
    height: auto;
  }
  .peole_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    width: 100%;
    img {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
    }
    span {
      flex: 1;
      line-height: 1.5rem;
      margin: 0 5px;
      font-size: 11px;
      color: #8c8c8c;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
  }
}
</style>
